<script setup>
import { ref, onMounted, computed } from 'vue'

const name = ref('哈哈哈')
const phone = ref('')
const avatar = ref('../../static/logo.png')
const realnameStatus = ref('未认证') // 实名认证状态
const realnameStatusClass = computed(() => {
  if (realnameStatus.value === '已认证') return 'certified'
  if (realnameStatus.value === '未通过') return 'failed'
  return 'uncertified'
})
const realnameStatusText = computed(() => realnameStatus.value)

function handleLogout(){
  // 退出登录逻辑
}

// 修改头像
function handleChangeAvatar() {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      const tempFilePath = res.tempFilePaths[0]
      avatar.value = tempFilePath
      uni.showToast({
        title: '头像修改成功',
        icon: 'success'
      })
    },
    fail: (err) => {
      uni.showToast({
        title: '选择图片失败',
        icon: 'error'
      })
    }
  })
}

// 修改姓名
function handleChangeName() {
  uni.showModal({
    title: '修改姓名',
    editable: true,
    placeholderText: '请输入新的姓名',
    content: name.value,
    success: (res) => {
      if (res.confirm && res.content.trim()) {
        name.value = res.content.trim()
        uni.showToast({
          title: '姓名修改成功',
          icon: 'success'
        })
      }
    }
  })
}

// 获取微信手机号
function onGetPhoneNumber(e) {
  if (e.detail.errMsg === 'getPhoneNumber:ok') {
    uni.showLoading({
      title: '获取中...'
    })
    
    // 模拟后端解密过程
    setTimeout(() => {
      phone.value = '138****8000' // 假设后端返回手机号
      uni.setStorageSync('userPhone', phone.value)
      uni.hideLoading()
      uni.showToast({ 
        title: '获取成功', 
        icon: 'success' 
      })
    }, 1000)
  } else {
    uni.showToast({ 
      title: '用户未授权', 
      icon: 'none' 
    })
  }
}

// 实名认证
function handleRealNameAuth() {
  if (realnameStatus.value === '已认证') {
    uni.showToast({
      title: '已完成实名认证',
      icon: 'none'
    })
    return
  }
  
  uni.navigateTo({
    url: '/pages/realname/index'
  })
}

onMounted(() => {
  console.log('页面加载完成')
  realnameStatus.value = uni.getStorageSync('realnameStatus') || '未认证'
  phone.value = uni.getStorageSync('userPhone') || ''
})
</script>

<template>
  <view class="user">
    <view class="user-content">
      <view class="content-whole" @click="handleChangeAvatar">
        <view class="content-left">头像</view>
        <view class="content-right">
          <view class="right-img">
            <image :src="avatar" mode="aspectFill" class="avatar"></image>
          </view>
          <view class="right-info">
            <image src="../../static/right.png" class="arrow-icon"></image>
          </view>
        </view>
      </view>
      <view class="user-diver"></view>
      <view class="content-whole" @click="handleChangeName">
        <view class="content-left">昵称</view>
        <view class="content-right">
          <view class="right-text">
            {{name}}
          </view>
          <view class="right-info">
            <image src="../../static/right.png" class="arrow-icon"></image>
          </view>
        </view>
      </view>
    </view>

    <view class="user-content">
      <view class="content-whole">
        <view class="content-left">手机号</view>
        <view class="content-right">
          <view class="right-text">{{ phone}}</view>
          <button 
            v-if="!phone" 
            open-type="getPhoneNumber" 
            @getphonenumber="onGetPhoneNumber" 
            class="get-phone-btn"
          >
            获取微信手机号
          </button>
        </view>
      </view>
      <view class="user-diver"></view>
      <view class="content-whole" @click="handleRealNameAuth">
        <view class="content-left">实名认证</view>
        <view class="content-right">
          <view class="right-text" :class="{ 'auth-success': realnameStatus === '已认证' }">
            {{realnameStatusText}}
          </view>
          <view class="right-info">
            <image src="../../static/right.png" class="arrow-icon"></image>
          </view>
        </view>
      </view>
    </view>
    <view class="user-btn" @click="handleLogout">退出登录</view>
  </view>
</template>

<style scoped>
.user {
  box-sizing: border-box;
  padding: 20rpx;
  min-height: calc(100vh - 100rpx);
  padding-bottom: 120rpx;
  position: relative;
  background-color: #F9F9F9;
}

.user-content {
  margin-bottom: 20rpx;
  padding: 0 20rpx;
  border-radius: 20rpx;
  background-color: white;
}

.content-whole {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100rpx;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.content-whole:active {
  background-color: #f5f5f5;
}

.content-left {
  font-size: 32rpx;
  color: #333;
}

.content-right {
  display: flex;
  align-items: center;
}

.right-img {
  margin-right: 20rpx;
}

.avatar {
  border-radius: 50%;
  width: 80rpx;
  height: 80rpx;
}

.right-text {
  margin-right: 20rpx;
  font-size: 30rpx;
  color: #666;
}

.auth-success {
  color: #07c160;
  font-weight: bold;
}

.arrow-icon {
  width: 36rpx;
  height: 36rpx;
}

.user-diver {
  margin-left: 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.user-btn {
  border-radius: 60rpx;
  text-align: center;
  padding: 24rpx 0;
  font-size: 32rpx;
  color: #fff;
  position: fixed;
  bottom: 60rpx;
  width: calc(100% - 80rpx);
  left: 40rpx;
  background-color: #e64340;
}

.get-phone-btn {
  font-size: 26rpx;
  padding: 0 30rpx;
  height: 60rpx;
  border-radius: 30rpx;
  background: #4ecdc4;
  color: #fff;
  border: none;
  margin-left: 20rpx;
}
</style>